<template>
    <div>
        <dv-border-box-12 style="width: 97%;height:150vh;color: white">
            <div>
                <!--搜索框-->
                <el-container style="color: #fff;font-size: medium">
                    <div style="padding:30px;">
                        <el-row style="display:flex;align-items:center">
                            所属单位:
                            <el-select style="margin-right: 10px" v-model="value" clearable placeholder="请选择 所属单位" size="small">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            单位限制:
                            <el-select style="margin-right: 10px" v-model="value" clearable placeholder="包含下级单位" size="small">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            设备类型:
                            <el-select style="margin-right: 10px" v-model="value" clearable placeholder="请选择 设备类型" size="small">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                           选择站点:
                            <el-select v-model="value" clearable placeholder="请选择 选择站点" size="small">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-row>
                        <el-row style="display: flex;padding:20px;align-items:center;">
                            楼层:
                            <el-select style="margin-right: 10px" v-model="value" clearable placeholder="请选择 楼层" size="small">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            设备号:
                            <el-select style="margin-right: 10px" v-model="value" clearable placeholder="请输入 设备号" size="small">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            状态:
                            <el-select style="margin-right: 10px" v-model="value" clearable placeholder="请输入 状态" size="small">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            地址:
                            <el-select v-model="value" clearable placeholder="请输入 地址" size="small">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                                <el-button type="primary" icon="el-icon-check" size="small" style="margin-left: 15px">搜索</el-button>
                        </el-row>
                    </div>
                </el-container>
            </div>
            <div>
                <!--主体-->
                <div style="background: #242E66;display:flex;width: 95%;margin-left: 30px">
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <router-link to="/Des1">
                            <el-card index="des1" class="box-card" style="height: 100%;background-color: #3A478F">
                                <div slot="header" class="clearfix" style="color: white">
                                    <span><i class="el-icon-connection" style="color:#54FF00">在线</i></span>
                                    <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                                </div>
                                <div style="display: flex;height: 100%">
                                    <div style="width: 60px;height:100%">
                                        <img src="~@/assets/3.png">
                                    </div>
                                    <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                        <div class="text item">
                                            <el-row prop="name">98cc4d3037be</el-row>
                                            <el-row prop="name">消防主机</el-row>
                                            <el-row prop="address">朔城区鄯阳街3号</el-row>
                                            <el-row prop="address">鄯阳街支行</el-row>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex;height: 30px">
                                    <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                                </div>
                            </el-card>
                        </router-link>
                    </div>
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <router-link to="/Des2">
                            <el-card index="des2" class="box-card" style="height: 100%;background-color: #3A478F">
                                <div slot="header" class="clearfix" style="color: white">
                                    <span><i class="el-icon-connection" style="color:#54FF00">在线</i></span>
                                    <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                                </div>
                                <div style="display: flex;height: 100%">
                                    <div style="width: 60px;height:100%">
                                        <img src="~@/assets/3.png">
                                    </div>
                                    <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                        <div class="text item">
                                            <el-row prop="name">98cc4d300deb</el-row>
                                            <el-row prop="name">消防主机</el-row>
                                            <el-row prop="address">右玉县玉林东街</el-row>
                                            <el-row prop="address">右玉县支行</el-row>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex;height: 30px">
                                    <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                                </div>
                            </el-card>
                        </router-link>
                    </div>
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <router-link to="/Des3">
                            <el-card index="des3" class="box-card" style="height: 100%;background-color: #3A478F">
                                <div slot="header" class="clearfix" style="color: white">
                                    <span><i class="el-icon-connection" style="color:#54FF00">在线</i></span>
                                    <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                                </div>
                                <div style="display: flex;height: 100%">
                                    <div style="width: 60px;height:100%">
                                        <img src="~@/assets/3.png">
                                    </div>
                                    <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                        <div class="text item">
                                            <el-row prop="name">98cc4d3037dd</el-row>
                                            <el-row prop="name">消防主机</el-row>
                                            <el-row prop="address">山阴县G208(同太路)</el-row>
                                            <el-row prop="address">山阴县同太南路支行</el-row>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex;height: 30px">
                                    <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                                </div>
                            </el-card>
                        </router-link>
                    </div>
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <router-link to="/Des4">
                            <el-card index="des4" class="box-card" style="height: 100%;background-color: #3A478F">
                                <div slot="header" class="clearfix" style="color: white">
                                    <span><i class="el-icon-connection" style="color:#54FF00">在线</i></span>
                                    <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                                </div>
                                <div style="display: flex;height: 100%">
                                    <div style="width: 60px;height:100%">
                                        <img src="~@/assets/3.png">
                                    </div>
                                    <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                        <div class="text item">
                                            <el-row prop="name">98cc4d300e16</el-row>
                                            <el-row prop="name">消防主机</el-row>
                                            <el-row prop="address">山阴县洪涛东街</el-row>
                                            <el-row prop="address">山阴县支行</el-row>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex;height: 30px">
                                    <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                                </div>
                            </el-card>
                        </router-link>
                    </div>
                </div>
                <div style="background: #242E66;display:flex;width: 95%;margin-left: 30px">
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <el-card class="box-card" style="height: 100%;background-color: #3A478F">
                            <div slot="header" class="clearfix" style="color: white">
                                <span><i class="el-icon-connection" style="color:#54FF00">在线</i></span>
                                <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                            </div>
                            <div style="display: flex;height: 100%">
                                <div style="width: 60px;height:100%">
                                    <img src="~@/assets/3.png">
                                </div>
                                <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                    <div class="text item">
                                        <el-row prop="name">98cc4d300dfd</el-row>
                                        <el-row prop="name">消防主机</el-row>
                                        <el-row prop="address">怀仁市北坛东街</el-row>
                                        <el-row prop="address">怀仁迎宾街支行</el-row>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;height: 30px">
                                <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                            </div>
                        </el-card>
                    </div>
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <el-card class="box-card" style="height: 100%;background-color: #3A478F">
                            <div slot="header" class="clearfix" style="color: white">
                                <span><i class="el-icon-connection" style="color:#54FF00">在线</i></span>
                                <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                            </div>
                            <div style="display: flex;height: 100%">
                                <div style="width: 60px;height:100%">
                                    <img src="~@/assets/3.png">
                                </div>
                                <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                    <div class="text item">
                                        <el-row prop="name">98cc4d300dea</el-row>
                                        <el-row prop="name">消防主机</el-row>
                                        <el-row prop="address">怀仁市云州西街56号</el-row>
                                        <el-row prop="address">怀仁市支行</el-row>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;height: 30px">
                                <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                            </div>
                        </el-card>
                    </div>
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <el-card class="box-card" style="height: 100%;background-color: #3A478F">
                            <div slot="header" class="clearfix" style="color: white">
                                <span><i class="el-icon-connection" style="color:red">离线</i></span>
                                <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                            </div>
                            <div style="display: flex;height: 100%">
                                <div style="width: 60px;height:100%">
                                    <img src="~@/assets/3.png">
                                </div>
                                <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                    <div class="text item">
                                        <el-row prop="name">98cc4d3037e7</el-row>
                                        <el-row prop="name">消防主机</el-row>
                                        <el-row prop="address">平鲁区平安街</el-row>
                                        <el-row prop="address">平鲁区支行</el-row>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;height: 30px">
                                <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                            </div>
                        </el-card>
                    </div>
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <el-card class="box-card" style="height: 100%;background-color: #3A478F">
                            <div slot="header" class="clearfix" style="color: white">
                                <span><i class="el-icon-connection" style="color:#54FF00">在线</i></span>
                                <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                            </div>
                            <div style="display: flex;height: 100%">
                                <div style="width: 60px;height:100%">
                                    <img src="~@/assets/3.png">
                                </div>
                                <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                    <div class="text item">
                                        <el-row prop="name">98cc4d300e16</el-row>
                                        <el-row prop="name">消防主机</el-row>
                                        <el-row prop="address">山阴县洪涛东街</el-row>
                                        <el-row prop="address">山阴县支行</el-row>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;height: 30px">
                                <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                            </div>
                        </el-card>
                    </div>
                </div>
                <div style="background: #242E66;display:flex;width: 95%;margin-left: 30px">
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <el-card class="box-card" style="height: 100%;background-color: #3A478F">
                            <div slot="header" class="clearfix" style="color: white">
                                <span><i class="el-icon-connection" style="color:#54FF00">在线</i></span>
                                <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                            </div>
                            <div style="display: flex;height: 100%">
                                <div style="width: 60px;height:100%">
                                    <img src="~@/assets/3.png">
                                </div>
                                <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                    <div class="text item">
                                        <el-row prop="name">98cc4d3037e7</el-row>
                                        <el-row prop="name">消防主机</el-row>
                                        <el-row prop="address">平鲁区平安街</el-row>
                                        <el-row prop="address">平鲁区支行</el-row>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;height: 30px">
                                <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                            </div>
                        </el-card>
                    </div>
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <el-card class="box-card" style="height: 100%;background-color: #3A478F">
                            <div slot="header" class="clearfix" style="color: white">
                                <span><i class="el-icon-connection" style="color:#54FF00">在线</i></span>
                                <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                            </div>
                            <div style="display: flex;height: 100%">
                                <div style="width: 60px;height:100%">
                                    <img src="~@/assets/3.png">
                                </div>
                                <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                    <div class="text item">
                                        <el-row prop="name">98cc4d300dea</el-row>
                                        <el-row prop="name">消防主机</el-row>
                                        <el-row prop="address">怀仁市云州西街56号</el-row>
                                        <el-row prop="address">怀仁市支行</el-row>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;height: 30px">
                                <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                            </div>
                        </el-card>
                    </div>
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <el-card class="box-card" style="height: 100%;background-color: #3A478F">
                            <div slot="header" class="clearfix" style="color: white">
                                <span><i class="el-icon-connection" style="color:#54FF00">在线</i></span>
                                <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                            </div>
                            <div style="display: flex;height: 100%">
                                <div style="width: 60px;height:100%">
                                    <img src="~@/assets/3.png">
                                </div>
                                <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                    <div class="text item">
                                        <el-row prop="name">98cc4d3037e7</el-row>
                                        <el-row prop="name">消防主机</el-row>
                                        <el-row prop="address">平鲁区平安街</el-row>
                                        <el-row prop="address">平鲁区支行</el-row>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;height: 30px">
                                <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                            </div>
                        </el-card>
                    </div>
                    <div style="flex: 1;background: #3A478F;height: 230px;margin: 10px">
                        <el-card class="box-card" style="height: 100%;background-color: #3A478F">
                            <div slot="header" class="clearfix" style="color: white">
                                <span><i class="el-icon-connection" style="color:#54FF00">在线</i></span>
                                <span style="float: right; padding: 3px 0" type="text">线路数：1</span>
                            </div>
                            <div style="display: flex;height: 100%">
                                <div style="width: 60px;height:100%">
                                    <img src="~@/assets/3.png">
                                </div>
                                <div style="color: #fff;flex: 1 1 0%;margin-left: 20px">
                                    <div class="text item">
                                        <el-row prop="name">98cc4d300e16</el-row>
                                        <el-row prop="name">消防主机</el-row>
                                        <el-row prop="address">山阴县洪涛东街</el-row>
                                        <el-row prop="address">山阴县支行</el-row>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex;height: 30px">
                                <i class="el-icon-message-solid" style="color: #2BBCD7;margin-top: 35px">正常</i>
                            </div>
                        </el-card>
                    </div>
                </div>
                <div class="block"style="position: absolute;left: 28%;bottom: 3%">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="20">
                    </el-pagination>
                </div>
            </div>
        </dv-border-box-12>
    </div>
</template>sss

<script>
    export default {
        name: "Test01",
        data(){
            return{
            }
        }
    }
</script>

<style>
    .el-container{
        margin-left: 0px;
    }
    .el-card_body{
        height: calc(100% - 120px);
    }
</style>